<template>
  <div class="body">
    <div class="head">
      <div class="item">
        <div class="title">入库Port口</div>
        <div class="bottom-container">
          <el-button type="primary" size="medium" @click="navigate('inbound', 'A1')">A1</el-button>
          <el-button type="primary" size="medium" @click="navigate('inbound', 'A2')">A2</el-button>
          <el-button type="primary" size="medium" @click="navigate('inbound', 'B1')">B1</el-button>
          <el-button type="primary" size="medium" @click="navigate('inbound', 'B2')">B2</el-button>
          <el-button type="primary" size="medium" @click="navigate('inbound', 'D1')">D1</el-button>
          <el-button type="primary" size="medium" @click="navigate('inbound', 'D2')">D2</el-button>
          <el-button type="primary" size="medium" @click="navigate('inbound', 'D3')">D3</el-button>
          <el-button type="primary" size="medium" @click="navigate('inbound', 'C1')">C1</el-button>
          <el-button type="primary" size="medium" @click="navigate('inbound', 'C2')">C2</el-button>
          <el-button type="primary" size="medium" @click="navigate('inbound', 'E')">E</el-button>
        </div>
      </div>
      <div class="item">
        <div class="title">出库Port口(良品)</div>
        <div class="bottom-container">
          <el-button type="primary" size="medium" @click="navigate('outbound', 'A1')">A1</el-button>
          <el-button type="primary" size="medium" @click="navigate('outbound', 'A2')">A2</el-button>
          <el-button type="primary" size="medium" @click="navigate('outbound', 'B1')">B1</el-button>
          <el-button type="primary" size="medium" @click="navigate('outbound', 'B2')">B2</el-button>
          <el-button type="primary" size="medium" @click="navigate('outbound', 'D1')">D1</el-button>
          <el-button type="primary" size="medium" @click="navigate('outbound', 'D2')">D2</el-button>
          <el-button type="primary" size="medium" @click="navigate('outbound', 'D3')">D3</el-button>
          <el-button type="primary" size="medium" @click="navigate('outbound', 'C1')">C1</el-button>
          <el-button type="primary" size="medium" @click="navigate('outbound', 'C2')">C2</el-button>
          <el-button type="primary" size="medium" @click="navigate('outbound', 'E')">E</el-button>
        </div>
      </div>
      <div class="item">
        <div class="title">出库Port口(不良品)</div>
        <div class="bottom-container">
          <el-button type="primary" size="medium" @click="navigate('defetive', 'A1')">A1</el-button>
          <el-button type="primary" size="medium" @click="navigate('defetive', 'A2')">A2</el-button>
          <el-button type="primary" size="medium" @click="navigate('defetive', 'B1')">B1</el-button>
          <el-button type="primary" size="medium" @click="navigate('defetive', 'B2')">B2</el-button>
          <el-button type="primary" size="medium" @click="navigate('defetive', 'D1')">D1</el-button>
          <el-button type="primary" size="medium" @click="navigate('defetive', 'D2')">D2</el-button>
          <el-button type="primary" size="medium" @click="navigate('defetive', 'D3')">D3</el-button>
          <el-button type="primary" size="medium" @click="navigate('defetive', 'C1')">C1</el-button>
          <el-button type="primary" size="medium" @click="navigate('defetive', 'C2')">C2</el-button>
          <el-button type="primary" size="medium" @click="navigate('defetive', 'E')">E</el-button>
        </div>
      </div>
      <div class="item">
        <div class="title">分拣</div>
        <div class="bottom-container">
          <el-button type="primary" size="medium" @click="navigate('sort')">分拣看板</el-button>
        </div>
      </div>
      <div class="item">
        <div class="title">库内</div>
        <div class="bottom-container">
          <el-button type="primary" size="medium" @click="navigate('storage')">管理看板</el-button>
          <el-button type="primary" size="medium" @click="navigate('jtStorage')">胶条仓管理看板</el-button>
          <el-button type="primary" size="medium" @click="navigate('management')">储位看板</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    navigate(type, port) {
      switch(type) {
        case 'inbound':
          this.$router.push(`/inboundport/${port}`)
          break
        case 'outbound':
          this.$router.push(`/outboundport/${port}`)
          break
        case 'defetive':
          this.$router.push(`/defectiveOutbound/${port}`)
          break
        case 'sort':
          this.$router.push('/sortBoard')
          break
        case 'storage':
          // this.$router.push('/storageBoard')
          this.$router.push('/productManagement')
          break
        case 'management':
          this.$router.push('/storageMonitor')
          break
        case 'jtStorage':
          this.$router.push('/jtStorageBoard')
          break
      }
    }
  }
}
</script>

<style scoped lang="less">
// .container {
  
// }
.body {
  // background-image: url('../assets/img/1-背景.png');
  // background-size: 100% 100%;
  // width: 100%;
  // height: 100vh;
  // display: flex;
  // flex-direction: column;
  padding: 10px;
  .head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    .item {
      display: flex;
      flex-direction: column;
      gap: 10px;
      .title {
        font-size: x-large;
        color: #000;
      }
      .bottom-container {
        display: flex;
      }
    }
  }
}
</style>
